<style scoped>
  .layout-con {
    height: 100%;
    width: 100%;
  }

  .menu-item span {
    display: inline-block;
    overflow: hidden;
    width: 69px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
  }

  .menu-item i {
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
  }

  .collapsed-menu span {
    width: 0px;
    transition: width .2s ease;
  }

  .collapsed-menu i {
    transform: translateX(5px);
    transition: font-size .2s ease .2s, transform .2s ease .2s;
    vertical-align: middle;
    font-size: 22px;
  }

  .title-top-center {
    text-align: center;

  }

  .title-top-right {
    float: right
  }

  .btn_tools {
    padding: 6px 10px 6px 10px;
    background: #eee;
    border-radius: 20px;
  }

  .ivu-cell-extra {
    color: #ed4014;
  }
</style>

<template>
  <Row type="flex" justify="center" align="top" class="code-row-bg">
    <Col span="1" style="background:#3F88D5;height:100vh;" :class="isAdmin == 1?'':'staffLeft'" v-if="isAdmin == 1">
      <NavLeft :selected="2" :avatar="avatar"></NavLeft>
    </Col>
    <Col span="4" :class="isAdmin == 1?'':'staffLeft'" v-if="isAdmin == 1">
      <NavMiddle :itemList="itemList"></NavMiddle>
    </Col>
    <Col span="19" style="background:#f5f7f9;height:100vh;padding-bottom: 66px" :class="isAdmin == 1?'':'staffRight'">
      <Layout>
        <Content :style="{padding: '0 16px 16px'}">
          <Breadcrumb :style="{margin: '16px 0'}" id="mainTitle">
            <Row type="flex" justify="space-between">
              <Col span="8">
                <span class="back" style="font-size: 16px;color: rgb(70, 76, 91);line-height: 36px;cursor: pointer"
                      @click="$router.back(-1)"><Icon type="ios-arrow-back"/>返回</span>
              </Col>
              <Col span="6" class="title-top-center"
                   style="font-size: 16px; font-weight: bold; color: rgb(70, 76, 91);text-align:center;line-height: 36px;display: flex;flex-direction: row;justify-content: center">
                <div style="margin-left: 30px;margin-right: 30px;line-height: 40px">{{title}}</div>
              </Col>
              <Col id="menuCol" span="10"
                   style="text-align: right;display: flex;flex-direction: column;justify-content: center;padding-left: 20%;box-sizing: border-box">
                <DatePicker size="large" type="date" placeholder="选择日期"  :editable="false" :clearable="false"
                            :value="chooseDate" @on-change="dateChange"></DatePicker>
              </Col>
            </Row>
          </Breadcrumb>
          <!-- 指标板块 -->
          <Card class="quota">
            <div class="titleBackH3 gradualYellow">
              <span class="tb_top">{{title}}</span>
              <span class="tb_bottom">
                <span class="tbb_left">{{total}} 件</span>
                <!--<span class="tbb_right">目标  0</span>-->
              </span>
              <div class="redios">
                <RadioGroup v-model="siteChoose" type="button" size="small">
                  <Radio :label="item.site_id" v-for="item in siteList">{{item.name}}</Radio>
                </RadioGroup>
              </div>
              <div class="logo"><img src="../../../assets/img/points/hanfeng.png"/></div>
              <!-- 分页 -->
              <div class="buttons">
                <!--<Button :class="page == 1?'pageTurningCant':'pageTurning'" @click="pageTurning(0)">上一页</Button>-->
                <!--<Button :class="page == 2?'pageTurningCant':'pageTurning'" @click="pageTurning(1)">下一页</Button>-->
                <!--<Button :class="page == 3?'pageTurningCant':'pageTurning'" @click="pageTurning(1)" v-if="team == 1">下一页</Button>-->
                <!--<Button :class="page == 2?'pageTurningCant':'pageTurning'" @click="pageTurning(1)" v-if="team == 2">下一页</Button>-->
                <Button :type="page == 1?'primary':null" @click="pageTurning(1)">第1页</Button>
                <Button :type="page == 2?'primary':null" @click="pageTurning(2)">第2页</Button>
                <Button :type="page == 3?'primary':null" @click="pageTurning(3)">第3页</Button>
                <Button :type="page == 4?'primary':null" @click="pageTurning(4)">第4页</Button>
                <Button :type="page == 5?'primary':null" @click="pageTurning(5)">第5页</Button>
                <Button :type="page == 6?'primary':null" @click="pageTurning(6)">第6页</Button>
                <Button @click="modal1 = true">重置</Button>
                <Button type="primary" @click="modal2 = true">提交</Button>
                <Modal
                    v-model="modal1"
                    title="重置"
                    @on-ok="returnList"
                    @on-cancel="modal1 = false">
                  <p>警告：本次所有操作将被重置，是否确认重置操作？</p>
                </Modal>
                <Modal
                    v-model="modal2"
                    title="提交"
                    @on-ok="submitList"
                    @on-cancel="modal2 = false">
                  <p>是否确认提交，进入下一件？</p>
                </Modal>
              </div>
            </div>
            <div class="contenthfc">
              <div class="point" v-for="(item,index) in list.items" :key="index"
                   v-if="index < (page * size) && index >= (page - 1) * size">
                <div class="imgs">
                  <img src="../../../assets/img/points2/1.jpg" v-show="item.id == 1"/>
                  <img src="../../../assets/img/points2/2.jpg" v-show="item.id == 2"/>
                  <img src="../../../assets/img/points2/3.jpg" v-show="item.id == 3"/>
                  <img src="../../../assets/img/points2/4.jpg" v-show="item.id == 4"/>
                  <img src="../../../assets/img/points2/5.jpg" v-show="item.id == 5"/>
                  <img src="../../../assets/img/points2/6.jpg" v-show="item.id == 6"/>
                  <img src="../../../assets/img/points2/7.jpg" v-show="item.id == 7"/>
                  <img src="../../../assets/img/points2/8.jpg" v-show="item.id == 8"/>
                  <img src="../../../assets/img/points2/9.jpg" v-show="item.id == 9"/>
                  <img src="../../../assets/img/points2/10.jpg" v-show="item.id == 10"/>
                  <img src="../../../assets/img/points2/11.jpg" v-show="item.id == 11"/>
                  <img src="../../../assets/img/points2/12.jpg" v-show="item.id == 12"/>
                </div>
                <div :class="val.isClick == 0?'label':'label isClick'" v-for="(val,ind) in item.pointList"
                     :style="{top:val.y + '%',left:val.x + '%'}" @click="labelClick(ind,index)">{{val.name}}
                </div>
              </div>
            </div>
          </Card>
          <entry v-if="entryShow" :entryData="entryData" @saveEntry="saveEntry"></entry>
        </Content>
      </Layout>
    </Col>
  </Row>
</template>

<script>
  import cookie from 'js-cookie';
  import entry from '../../assembly/entryForYichang'
  import NavLeft from '@/components/NavLeft';
  import NavMiddle from '@/components/NavMiddle';

  export default {
    name: "costRecord",
    data() {
      return {
        isCollapsed: false,
        itemList: [],
        itemInfo: [],
        tjList: [],
        unit_id: "",
        chooseQS: 0,
        valueList: [],
        entryShow: false,
        entryData: {},
        title: '',
        avatar: '',
        isAdmin: cookie.get('isAdmin'),
        page: 1,
        size: 2,
        total: 0,
        list: {
          id: 1,
          total: 0,
          items: [{
            id: 1,
            pointList: [{
              id: 1,
              name: 'PT2M',
              isClick: 0,
              x: 6,
              y: 7,
            }, {
              id: 2,
              name: 'PT2K',
              isClick: 0,
              x: 21,
              y: 10,
            }, {
              id: 3,
              name: 'PT6B',
              isClick: 0,
              x: 29,
              y: 1,
            }, {
              id: 4,
              name: 'PT6A',
              isClick: 0,
              x: 34,
              y: 3,
            }, {
              id: 5,
              name: 'PT2J',
              isClick: 0,
              x: 35,
              y: 11,
            }, {
              id: 6,
              name: 'PT2H',
              isClick: 0,
              x: 48,
              y: 1,
            }, {
              id: 7,
              name: 'PT3C',
              isClick: 0,
              x: 54,
              y: 12,
            }, {
              id: 8,
              name: 'PT4B',
              isClick: 0,
              x: 61,
              y: 8,
            }, {
              id: 9,
              name: 'PT2C',
              isClick: 0,
              x: 66,
              y: 8,
            }, {
              id: 10,
              name: 'PT2R',
              isClick: 0,
              x: 72,
              y: 8,
            }, {
              id: 11,
              name: 'PT4A',
              isClick: 0,
              x: 77,
              y: 8,
            }, {
              id: 12,
              name: 'PT2P',
              isClick: 0,
              x: 90,
              y: 3,
            },{
              id: 13,
              name: 'PT2N',
              isClick: 0,
              x: 5,
              y: 77,
            }, {
              id: 14,
              name: 'PT2L',
              isClick: 0,
              x: 16,
              y: 81,
            }, {
              id: 15,
              name: 'PT6C',
              isClick: 0,
              x: 25,
              y: 60,
            }, {
              id: 16,
              name: 'PT3G',
              isClick: 0,
              x: 33,
              y: 60,
            }, {
              id: 17,
              name: 'PT2O',
              isClick: 0,
              x: 32,
              y: 81,
            }, {
              id: 18,
              name: 'PT3E',
              isClick: 0,
              x: 44,
              y: 44,
            }, {
              id: 19,
              name: 'PT5A',
              isClick: 0,
              x: 44,
              y: 67,
            }, {
              id: 20,
              name: 'PT5C',
              isClick: 0,
              x: 50,
              y: 44,
            }, {
              id: 21,
              name: 'PT5D',
              isClick: 0,
              x: 49,
              y: 67,
            }, {
              id: 22,
              name: 'PT2F',
              isClick: 0,
              x: 49,
              y: 90,
            }, {
              id: 23,
              name: 'PT3D',
              isClick: 0,
              x: 64,
              y: 40,
            }, {
              id: 24,
              name: 'PT3F',
              isClick: 0,
              x: 64,
              y: 66,
            }, {
              id: 25,
              name: 'PT2Q',
              isClick: 0,
              x: 92,
              y: 67,
            }]
          }, {
            id: 2,
            pointList: [{
              id: 1,
              name: 'PT1J',
              isClick: 0,
              x: 4,
              y: 13,
            }, {
              id: 2,
              name: 'PT1K',
              isClick: 0,
              x: 95,
              y: 13,
            }]
          }, {
            id: 3,
            pointList: [{
              id: 1,
              name: 'PT1F',
              isClick: 0,
              x: 3,
              y: 13,
            }, {
              id: 2,
              name: 'PT1H',
              isClick: 0,
              x: 3,
              y: 26,
            }, {
              id: 3,
              name: 'PT1E',
              isClick: 0,
              x: 3,
              y: 38,
            }, {
              id: 4,
              name: 'PT1G',
              isClick: 0,
              x: 3,
              y: 47,
            }, {
              id: 5,
              name: 'PT15C',
              isClick: 0,
              x: 52,
              y: 2,
            }, {
              id: 6,
              name: 'PT15D',
              isClick: 0,
              x: 49,
              y: 62,
            }, {
              id: 7,
              name: 'PT2E',
              isClick: 0,
              x: 39,
              y: 77,
            }, {
              id: 8,
              name: 'PT2C',
              isClick: 0,
              x: 62,
              y: 2,
            }, {
              id: 9,
              name: 'PT2D',
              isClick: 0,
              x: 59,
              y: 69,
            }, {
              id: 10,
              name: 'PT2B',
              isClick: 0,
              x: 65,
              y: 77,
            }, {
              id: 11,
              name: 'PT2A',
              isClick: 0,
              x: 77,
              y: 77,
            }, {
              id: 12,
              name: 'PT1A',
              isClick: 0,
              x: 92,
              y: 10,
            }, {
              id: 13,
              name: 'PT1C',
              isClick: 0,
              x: 92,
              y: 24,
            }, {
              id: 14,
              name: 'PT1B',
              isClick: 0,
              x: 92,
              y: 45,
            }, {
              id: 15,
              name: 'PT1D',
              isClick: 0,
              x: 92,
              y: 54,
            }]
          }, {
            id: 4,
            pointList: [{
              id: 1,
              name: 'PT20A',
              isClick: 0,
              x: 14,
              y: 3,
            }, {
              id: 2,
              name: 'PT20D',
              isClick: 0,
              x: 27,
              y: 3,
            }, {
              id: 3,
              name: 'PT20E',
              isClick: 0,
              x: 36,
              y: 3,
            }, {
              id: 4,
              name: 'PT20M',
              isClick: 0,
              x: 46,
              y: 14,
            }, {
              id: 5,
              name: 'PT20N',
              isClick: 0,
              x: 53,
              y: 14,
            }, {
              id: 6,
              name: 'PT20Q',
              isClick: 0,
              x: 64,
              y: 4,
            }, {
              id: 7,
              name: 'PT20R',
              isClick: 0,
              x: 71,
              y: 4,
            }, {
              id: 8,
              name: 'PT20U',
              isClick: 0,
              x: 86,
              y: 3,
            }, {
              id: 9,
              name: 'PT20B',
              isClick: 0,
              x: 14,
              y: 53,
            }, {
              id: 10,
              name: 'PT20C',
              isClick: 0,
              x: 19,
              y: 76,
            },{
              id: 11,
              name: 'PT20F',
              isClick: 0,
              x: 38,
              y: 62,
            }, {
              id: 12,
              name: 'PT20G',
              isClick: 0,
              x: 46,
              y: 57,
            }, {
              id: 13,
              name: 'PT20J',
              isClick: 0,
              x: 49,
              y: 65,
            }, {
              id: 14,
              name: 'PT20H',
              isClick: 0,
              x: 53,
              y: 55,
            }, {
              id: 15,
              name: 'PT20P',
              isClick: 0,
              x: 62,
              y: 62,
            }, {
              id: 16,
              name: 'PT20S',
              isClick: 0,
              x: 65,
              y: 37,
            }, {
              id: 17,
              name: 'PT20T',
              isClick: 0,
              x: 79,
              y: 34,
            }, {
              id: 18,
              name: 'PT20V',
              isClick: 0,
              x: 85,
              y: 64,
            }, {
              id: 19,
              name: 'PT20K',
              isClick: 0,
              x: 46,
              y: 90,
            }, {
              id: 20,
              name: 'PT20L',
              isClick: 0,
              x: 52,
              y: 90,
            }]
          }, {
            id: 5,
            pointList: [{
              id: 1,
              name: 'PT9D',
              isClick: 0,
              x: 70,
              y: 40,
            }, {
              id: 2,
              name: 'PT9B',
              isClick: 0,
              x: 72,
              y: 51,
            }, {
              id: 3,
              name: 'PT15a',
              isClick: 0,
              x: 77,
              y: 73,
            }]
          }, {
            id: 6,
            pointList: [{
              id: 1,
              name: 'PT9C',
              isClick: 0,
              x: 18,
              y: 19,
            }, {
              id: 2,
              name: 'PT9A',
              isClick: 0,
              x: 18,
              y: 39,
            }]
          }, {
            id: 7,
            pointList: [{
              id: 1,
              name: 'PT3A',
              isClick: 0,
              x: 33,
              y: 38,
            }, {
              id: 2,
              name: 'PT3B',
              isClick: 0,
              x: 46,
              y: 57,
            }]
          }, {
            id: 8,
            pointList: [{
              id: 1,
              name: 'PT7F',
              isClick: 0,
              x: 44,
              y: 15,
            }, {
              id: 2,
              name: 'PT7E',
              isClick: 0,
              x: 59,
              y: 15,
            }, {
              id: 3,
              name: 'PT15B',
              isClick: 0,
              x: 66,
              y: 39,
            }, {
              id: 4,
              name: 'PT7D',
              isClick: 0,
              x: 20,
              y: 73,
            }, {
              id: 5,
              name: 'PT7A',
              isClick: 0,
              x: 31,
              y: 78,
            }, {
              id: 6,
              name: 'PT7B',
              isClick: 0,
              x: 70,
              y: 75,
            }, {
              id: 7,
              name: 'PT7C',
              isClick: 0,
              x: 76,
              y: 65,
            }]
          }, {
            id: 9,
            pointList: [{
              id: 1,
              name: 'PT19B',
              isClick: 0,
              x: 21,
              y: 50,
            }, {
              id: 2,
              name: 'PT19A',
              isClick: 0,
              x: 57,
              y: 51,
            }, {
              id: 3,
              name: 'PT17A',
              isClick: 0,
              x: 21,
              y: 59,
            }, {
              id: 4,
              name: 'PT17B',
              isClick: 0,
              x: 57,
              y: 60,
            }]
          }, {
            id: 10,
            pointList: [{
              id: 1,
              name: 'PT12A',
              isClick: 0,
              x: 17,
              y: 42,
            }]
          }, {
            id: 11,
            pointList: [{
              id: 1,
              name: 'PT8A',
              isClick: 0,
              x: 39,
              y: 83,
            }, {
              id: 2,
              name: 'PT8C',
              isClick: 0,
              x: 50,
              y: 74,
            }, {
              id: 3,
              name: 'PT8B',
              isClick: 0,
              x: 59,
              y: 81,
            }, {
              id: 4,
              name: 'PT8D',
              isClick: 0,
              x: 68,
              y: 78,
            }]
          }, {
            id: 12,
            name: 'L放大',
            pointList: [{
              id: 1,
              name: 'PT11B',
              isClick: 0,
              x: 32,
              y: 69,
            }, {
              id: 2,
              name: 'PT11A',
              isClick: 0,
              x: 58,
              y: 69,
            }]
          }],
        },
        modal1: false,
        modal2: false,
        chooseDate: cookie.get('chooseDate'),
        siteList: [],
        siteChoose: '',
      };
    },
    components: {NavLeft: NavLeft, NavMiddle: NavMiddle, entry: entry},
    methods: {
      getData() {
        var uid = cookie.get('uid');
        var token = cookie.get('token');
        if (!uid || !token) {
          //this.$Message.warning('请登录');
          //store.dispatch('setLoginStatus', 0)
          //window.location.reload()
        }
        this.$Loading.start();
        var str = {type: 'login', loginType: cookie.get('loginType')};
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/item/home', {alldata: strdata.alldata}).then((response) => {
          this.$Loading.finish();
          var res = this.$twjsdes.decrypt(response.data.alldata);
          if (res.status == -1 && res.data.backurl) {
            this.$Modal.warning({
              title: '提示',
              content: '请在企业微信授权登录后使用',
              onOk: () => {
                if (this.$twjsdes.isWechat() === true) {
                  window.location.href = res.data.backurl_oauth2
                } else {
                  window.location.href = res.data.backurl
                }
              }
            });

          } else if (res.status != 1) {
            this.$Message.error(res.msg);
          } else {
            this.itemList = res.data.list;
            this.itemInfo = res.data;
            this.avatar = res.data.avatar;
          }
          // console.log(res.data.brands);
        }).catch(function (error) {
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
          //console.log(error);
        });
      },
      getInfo() {
        let self = this
        this.$Loading.start();
        var str = {
          uid: cookie.get('uid'),
          type: 1,
          unit_id: self.$route.query.id,
          ymd: self.chooseDate,
          loginType: cookie.get('loginType')
        };
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/item/inspectnum', {alldata: strdata.alldata}).then((response) => {
          this.$Loading.finish();
          var res = this.$twjsdes.decrypt(response.data.alldata);
          // console.log(res.data)
          self.siteList = res.data.device_list
          self.total = res.data.num
        }).catch(function (error) {
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
          //console.log(error);
        });
      },
      labelClick(ind, index) {
        let self = this
        if (self.list.items[index].pointList[ind].isClick == 0) {
          self.list.items[index].pointList[ind].isClick = 1
        } else {
          self.list.items[index].pointList[ind].isClick = 0
        }
      },
      pageTurning(index) {
        let self = this
        self.page = index
        // if (index == 0) {
        //   if (self.page > 1) {
        //     self.page = self.page - 1
        //   }
        // } else {
        //   if (self.team == 1) {
        //     if (self.page < 3) {
        //       self.page = self.page + 1
        //     }
        //   } else if (self.team == 2) {
        //     if (self.page < 2) {
        //       self.page = self.page + 1
        //     }
        //   }
        // }
      },
      returnList() {
        let self = this
        for (let i = 0; i < self.list.items.length; i++) {
          for (let x = 0; x < self.list.items[i].pointList.length; x++) {
            self.list.items[i].pointList[x].isClick = 0
          }
        }
      },
      submitList() {
        let self = this
        this.$Loading.start();
        var str = {
          uid: cookie.get('uid'),
          type: 1,
          unit_id: self.$route.query.id,
          list: self.list,
          site_id: self.siteChoose,
          ymd: self.chooseDate,
          loginType: cookie.get('loginType')
        };
        if (self.siteChoose == '') {
          this.$Message.error('未选择设备');
          this.$Loading.finish();
          return
        }
        console.log(str)
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/item/inspectaddtwo', {alldata: strdata.alldata}).then((response) => {
          this.$Loading.finish();
          var res = this.$twjsdes.decrypt(response.data.alldata);
          // console.log(res)
          self.returnList()
          self.getInfo()
          self.publicInfo()
          self.page = 1
        }).catch(function (error) {
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
          //console.log(error);
        });
      },
      publicInfo() {
        let self = this
        this.$Loading.start();
        var str = {
          uid: cookie.get('uid'),
          unit_id: self.$route.query.id,
          ymd: self.chooseDate,
          loginType: cookie.get('loginType')
        };
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/info/reporttj', {alldata: strdata.alldata}).then((response) => {
          this.$Loading.finish();
          var res = this.$twjsdes.decrypt(response.data.alldata);
          console.log(res)
        }).catch(function (error) {
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
          //console.log(error);
        });
      },
      dateChange(val) {
        let self = this
        self.chooseDate = val
        cookie.set('chooseDate',val)
        self.getInfo()
      },
    },
    computed: {
      menuitemClasses: function () {
        return [
          'menu-item',
          this.isCollapsed ? 'collapsed-menu' : ''
        ]
      }
    },
    created() {
      window.document.title = 'SCS详情';
      this.title = this.$route.query.title
      this.getInfo();
    },
    mounted() {
      this.getData();
    }
  }
</script>

<style lang="less">
  #menuCol {
    #menu {
      font-size: 20px;
      background: #3384dd;
      color: #fff;
      padding: 4px 6px;
      border-radius: 50px;
      cursor: pointer;
    }
    .ivu-select-dropdown {
      background: #515151;
      color: #fff;
      opacity: .8;
      .ivu-dropdown-item {
        background: #515151;
        color: #fff;
        opacity: 1;
        text-align: center;
      }
    }
  }
  .quota {
    display: flex;
    flex-direction: column;
    padding: 0;
    .ivu-card-body {
      padding: 0;
      .titleBackH3 {
        width: 100%;
        height: 104px;
        text-align: left;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        color: #fff;
        font-size: 17px;
        padding-left: 21px;
        display: flex;
        flex-direction: column;
        position: relative;
        .tb_top {
          font-size: 16px;
          margin-top: 20px;
          margin-bottom: 17px;
        }
        .tb_bottom {
          display: flex;
          flex-direction: row;
          .tbb_left {
            font-size: 26px;
            margin-right: 70px;
            line-height: 26px;
          }
          .tbb_right {
            font-size: 14px;
            line-height: 26px;
          }
        }
        .redios{
          position: absolute;
          right: 67%;
          top: 25%;
          width: 130px;
          label{
            border-radius: 3px;
          }
          .ivu-radio-wrapper-checked{
            background: #2d8cf0;
            color: #fff;
          }
          label:nth-child(1){
            border-radius: 3px;
          }
          label:nth-child(2){
            margin-left: 3px;
          }
          label:nth-child(3){
            margin-top: 3px;
          }
          label:nth-child(4){
            margin-top: 3px;
            margin-left: 3px;
          }
        }
        .logo {
          width: 33.33%;
          height: 100%;
          position: absolute;
          right: 33.33%;
          top: 0;
          border-bottom: 1px solid #e5e5e5;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .buttons {
          width: 33.33%;
          height: 100%;
          position: absolute;
          right: 0;
          display: flex;
          flex-direction: row;
          justify-content: center;
          flex-wrap: wrap;
          box-sizing: border-box;
          border-bottom: 1px solid #e5e5e5;
          border-left: 1px solid #e5e5e5;
          background: #fff;
          padding: 10px 30px;
          box-sizing: border-box;
          .pageTurning {
            font-weight: normal;
            cursor: pointer;
            color: #3f8fe0
          }
          .pageTurningCant {
            font-weight: normal;
            color: #878b91;
            cursor: not-allowed;
          }
          button {
            width: 70px;
            height: 30px;
            margin-top: auto;
            margin-bottom: auto;
            margin-right: 10px;
          }
          button:last-child{
            margin-right: 0;
          }
        }
      }
      .contenthfc {
        display: flex;
        flex-direction: column;
        background: #f9f9f9;
        height: 700px;
        .point {
          width: 100%;
          height: 350px;
          border-right: 1px solid #e5e5e5;
          border-bottom: 1px solid #e5e5e5;
          background: #fff;
          position: relative;
          .imgs {
            width: 100%;
            height: 100%;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .label {
            position: absolute;
            left: 0;
            top: 0;
            padding: 1px 5px;
            border: 1px solid #3384dd;
            border-radius: 3px;
            cursor: pointer;
            font-size: 14px;
            color: #3384dd;
            background: #fff;
          }
          .isClick {
            color: #fff;
            background: #ff0000;
            border-color: #ff0000;
          }
        }
      }
    }
  }
  .cards {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .cdLeft {
      display: flex;
      flex-direction: column;
      .cl_top {
        font-size: 16px;
        color: #222222;
      }
      .cl_down {
        font-size: 16px;
        color: #666666;
        margin-top: 10px;
        .cld_color {
          color: #ffb11b;
          margin-left: 10px;
        }
        .cld_color2 {
          color: #56b44a;
          margin-left: 10px;
        }
      }
      .special {
        background: #dc4444;
        color: #fff;
        font-size: 13px;
        padding: 2px 4px;
      }
    }
    .cdright {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
  .ivu-card-extra {
    top: 11px;
    .conButtons {
      display: flex;
      flex-direction: row;
      .buts {
        padding: 4px 8px;
        background: #f5f5f5;
        font-size: 14px;
        color: #666666;
        margin-right: 10px;
        cursor: pointer;
        border-radius: 3px;
      }
      .chooseButs {
        background: #3f8fe0;
        color: #fff;
      }
    }
  }
  .ivu-card-body {
    background: #f9f9f9;
    .contentDiv {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      flex-wrap: wrap;
      .con {
        width: 32.5%;
        margin-top: 16px;
        display: flex;
        flex-direction: column;
        position: relative;
        cursor: pointer;
        .colorLabel {
          display: block;
          width: 40px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          font-size: 14px;
          color: #fff;
          position: absolute;
          top: 0;
          left: 16px;
        }
        .times {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          margin-top: 18px;
          margin-bottom: 18px;
          line-height: 18px;
          .timesLeft {
            font-size: 16px;
            color: #666666;
          }
          .timesRight {
            font-size: 18px;
            color: #3f8fe0;
          }
        }
        .conText {
          font-size: 20px;
          color: #222222;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .needExplain {
          color: #dc4444;
        }
      }
      .con:nth-child(1), .con:nth-child(2), .con:nth-child(3) {
        margin-top: 0;
      }
      .more {
        width: 100%;
        height: 60px;
        text-align: center;
        line-height: 60px;
        font-size: 18px;
        color: #999999;
        background: #fff;
        margin-top: 16px;
        cursor: pointer;
      }
    }
  }
  @media screen and (min-width: 0px) and (max-width: 1400px) {
    .staffLeft {
      display: none;
    }
    .staffRight {
      width: 100%;
    }
    #menuCol {
      padding-left: 10% !important;
    }
    #mainTitle{
      margin: 4px 0 !important;
      .back{
        line-height: 40px !important;
      }
    }
    .titleBackH3{
      height: 4rem !important;
      .tb_top{
        margin-top: 0.5rem !important;
        margin-bottom: 0 !important;;
      }
    }
    .contenthf{
      height: 26rem !important;
      overflow-y: auto;
      .point{
        height: 13rem !important;
      }
    }
    .redios{
      right: 64% !important;
      top: 10% !important;
      .ivu-radio-wrapper-checked{
        background: #2d8cf0;
        color: #fff;
      }
      label{
        padding: 0 6px !important;
      }
    }
    .buttons{
      padding: 0 !important;
      button{
        padding: 0 !important;
        width: 40px !important;
        padding: 0 !important;
        text-align: center !important;
        margin-top: 1px !important;
        margin-bottom: 1px !important;
      }
      button:nth-child(4) {
        margin-right: 0 !important;
      }
      button:nth-child(8) {
        margin-right: 0 !important;
      }
    }
  }
</style>
